<template>
  <view class="tabs">
   <view class="list" v-for="item in newsList" :key="item.id" style="padding:20px;border-bottom:1px solid #333;" @click="handleClick(item)">
	   <view>{{item.title}}</view>
	   <view>作者：{{item.author_name}}</view>
	   <view>日期：{{item.published_at}}</view>
   </view>
  </view>
</template>

<script>
  // #ifdef APP-PLUS
  import {newsList} from './list.js'
  export default {
    components: {
     
    },
    data() {
      return {
       newsList:newsList,
	   _isWidescreen:false
      }
    },
	created(){
		  this._isWidescreen = false;
		  // #ifdef H5
		  var mediaQueryOb = uni.createMediaQueryObserver(this)
		  mediaQueryOb.observe({
			minWidth: 768
		  }, matches => {
			this._isWidescreen = matches;
		  })
		  this.handleClick(this.newsList[0])
	},
    methods: {
     handleClick(detail){
		  if (this._isWidescreen) { //若为宽屏，则触发右侧详情页的自定义事件
		   uni.$emit('updateDetail', {
			 detail: encodeURIComponent(JSON.stringify(detail))
		   })
		 } else {
		   uni.navigateTo({
			 url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
		   });
		 }
	 }
    }
  }
</script>

<style>
  /* #ifndef APP-PLUS */
  page {
    width: 100%;
    min-height: 100%;
    display: flex;
  }
  uni-swiper {
  	height: 100% !important;
  }

  /* #endif */

  .tabs {
    flex: 1;
    flex-direction: column;
    overflow: auto;
    background-color: #ffffff;
    /* #ifdef MP-ALIPAY || MP-BAIDU */
    height: 100vh;
    /* #endif */
  }

  .tab-bar {
    /* #ifdef APP-PLUS */
    width: 750rpx;
    /* #endif */
    height: 42px;
    flex-direction: row;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
  }

  /* #ifndef APP-NVUE */
  .tab-bar ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  /* #endif */

  .scroll-view-indicator {
    position: relative;
    height: 2px;
    background-color: transparent;
  }

  .scroll-view-underline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #007AFF;
  }

  .scroll-view-animation {
    transition-duration: 0.2s;
    transition-property: left;
  }

  .tab-bar-line {
    height: 1px;
    background-color: #cccccc;
  }

  .tab-box {
    flex: 1;
  }

  .uni-tab-item {
    /* #ifndef APP-PLUS */
    display: inline-block;
    /* #endif */
    flex-wrap: nowrap;
    padding-left: 20px;
    padding-right: 20px;
  }

  .uni-tab-item-title {
    color: #555;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    flex-wrap: nowrap;
    /* #ifndef APP-PLUS */
    white-space: nowrap;
    /* #endif */
  }

  .uni-tab-item-title-active {
    color: #007AFF;
  }

  .swiper-item {
    flex: 1;
    flex-direction: column;
  }

  .page-item {
    flex: 1;
    flex-direction: row;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
</style>
